<template>
	<view style="box-sizing: border-box; padding: 10px;" v-if="articleInfo">
		<view class="title" style="display: flex;">
		 <view v-if="articleInfo.is_top==1" style="border-radius: 4px; border: #EA9B37 solid 1px; color: #EA9B37; padding: 0px 6px; font-size: 10px; margin-right: 6px; flex: 0 0 100rpx;line-height: 40rpx;text-align: center;
		 height: 40rpx;">{{articleInfo.is_top==1?'已置顶':"置顶"}}</view>
		 {{articleInfo.title}}
		</view>
		<view style="font-size: 12px; color: #999; margin-left: 48px;margin-top: 20rpx;display: flex;align-items: center;justify-content: space-between;">
			<view class="">
				{{articleInfo.create_time}} 发布
			</view>
			<view class="" v-if="user_id==articleInfo.user_id" @click="delPushed">
				删除
			</view>
		</view>
		<view style="display: flex; margin-top: 10px;">
			<view style="width: 50%; display: flex; line-height: 40px;" @click="tipPage()">
				<u-image :lazy-load="true" width="40px" height="40px" :src="articleInfo.user_avatar||'https://cdn.uviewui.com/uview/swiper/2.jpg'" shape="circle"></u-image>
				<view style="margin-left: 10px;">
					{{articleInfo.user_nickname}}
				</view>
				
			</view>
			<view style="width: 50%; text-align: right; line-height: 40px;" v-if="user_id!=articleInfo.user_id">
				<u-button size="mini" @click="goConcern">{{articleInfo.is_concern==1?'已关注':'关注'}}</u-button>
			</view>
		</view>
		<view style="margin-top: 20px;">
			<u-parse :html="articleInfo.content"></u-parse>
		</view>
		<view>
			<view @click="k('img',articleInfo.images,index)"
			 v-if="articleInfo.images.length>0" v-for="(item,index) in articleInfo.images">
				<image :src="item" style="width: 100%;" mode="widthFix"></image>
			</view>
			<!-- <view style="position: relative;" @click="k('video',articleInfo.video)" v-if="articleInfo.video!=''">
				<view style="position: absolute; z-index: 1; top: 50%; left: 50%; transform:translate(-50%,-50%)">
					<u-icon color="#fff" size="40px" name="play-right-fill"></u-icon>
				</view>
				<image :src="articleInfo.video+'?vframe/jpg/offset/1'" style="width: 100%;" mode="widthFix"></image>
			</view> -->
			<view style="position: relative;" v-if="articleInfo.video!=''">
				
				<video :src="articleInfo.video" :poster="articleInfo.video+'?vframe/jpg/offset/1'"  style="width: 100%;"></video>
			</view>
		</view>
		<view>
			<comment-eg :articleId="'article1'" :listId="articleInfo.id"></comment-eg>
			<view class="dianzan_fenxiang">
				<view class="dianzan">
					<image v-if="articleInfo.is_like==1" @click="changeDian" src="../../static/selsect_dianzan.png" mode="aspectFill"></image>
					<image v-if="articleInfo.is_like==0" @click="changeDian" src="../../static/x4.png" mode="aspectFill"></image>
				</view>
				<view class="fenxiang">
					<image @click="show=true"  src="../../static/x3.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		
		<!-- 分享弹框 -->
		<u-popup v-model="show" mode="bottom">
			
			<view style="line-height: 50px; text-align: center;">
				<scroll-view scroll-x="true" >
					<view style="display: flex;">
						<view @click="goUrl(item.id)" v-for="(item,index) in attentList" style="width: 100px; margin-top: 5px; text-align: center; flex: 1;">
							<view>
								<image style="width: 50px; height: 50px; border-radius: 50%;" :src="item.avatar"></image>
								<view style="line-height: 20px;">{{item.nickname}}</view>	
							</view>
						</view>
					</view>
					
				</scroll-view>
			</view>
			<view style="padding: 20px; display: flex; text-align: center; justify-content: space-around;">
				<view  style="width: 50%;"  @click="publish('WXSceneSession')">
					<image src="/static/wx.png" style="width: 50px; height: 50px;"></image>
					<view>
						微信
					</view>
				</view>
				<view  style="width: 50%;"  @click="publish('WXSceneTimeline')">
					<image src="/static/pengyouquan.png" style="width: 50px; height: 50px;"></image>
					<view>
						朋友圈
					</view>
				</view>
			</view>
		</u-popup>
		<view @click="gb" v-if="istrue" style="position: fixed; z-index: 888; top: 0; left: 0; width: 100%; height: 100%; background: #fff; ">
			
		</view>
		<video  v-if="istrue" style="position: fixed; left: 50%; top: 50%;transform:translate(-50%,-50%); z-index: 999; width: 100%;"  :src="video" controls loop></video>
	</view>
</template>

<script>
	// import {myconcernList,myfansList,cancelConcern,addConcern} from "@/common/config/request.js"
	import {homeDetail,addConcern,cancelConcern,addLike,cancelLike,transpond,myconcernList,delPush} from "@/common/config/request.js"
	export default {
		data() {
			return {
				attentList:[],
				video:'',
				istrue:false,
				newsid:'',
				content: `
									<p>露从今夜白，月是故乡明</p>
									<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
								`,
				articleInfo:"",//文章详情
				show:false,
				imgUrl:"",//分享链接地址
				user_id: uni.getStorageSync('userdata').id,
			}
		},
		onLoad(option) {
			console.log(option,'2222')
			this.getHomeDetail(option.id)
			this.newsid=option.id
			this.imgUrl = this.config.baseURL+"/register.html?postId=" + this.user_id
			this.myconcernList()
		},
		methods: {
			delPushed(){
				// console.log(this.articleInfo.id)
				delPush({push_id:this.articleInfo.id}).then(res=>{
					console.log(res,'123456')
					if(res.statusCode==200){
						uni.showToast({
							icon:'none',
							title:'删除成功'
						})
						setTimeout(()=>{
							uni.navigateBack({
								
							})
						},1000)
					}
				})
			},
			goUrl(e){
				uni.navigateTo({
					url:'/pages/TUI-Chat/chat?conversationID=C2C'+e+'&newsid='+this.newsid
				})
			},
			myconcernList(){
				let data={
					user_id:uni.getStorageSync('userdata').id
				}
				myconcernList(data).then(res=>{
					console.log(res,'关注列表')
					this.attentList=res.data.data
				})
			},
			
			
			gb(){
				this.video=''
				this.istrue=false
			},
			k(type,item,index){
				console.log(item,index)
				// return false
				if(type=='img'){
					// console.log(item)
					// let arr = []
					// arr.push(item)
					 uni.previewImage({
					   urls: item,
					   current:index,
					   longPressActions: {
					       itemList: [],
					       success: function(data) {
					         
					       },
					       fail: function(err) {
					           console.log(err.errMsg);
					       }
					   },
					})
				}else{
					this.istrue=true
					this.video=item
				}
			},
			tipPage () {
				uni.navigateTo({
					url: '../user/info?uid=' + this.articleInfo.user_id
				})
			},
			// 分享
			publish(data){
				var that = this
				// console.log()
				uni.share({
					provider: "weixin",
					scene: data,
					type: 0,
					href: that.imgUrl,
					title: "邀请好友",
					summary: "快来注册吧",
					imageUrl: "",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
						var data={
							id:that.articleInfo.id
						}
						transpond(data).then(res=>{
							console.log(res)
							if(res.data.code==1){
								uni.showToast({
									icon:'none',
									title:'分享成功'
								})
							}
						})
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
				//分享到微信朋友圈
			shareFriendcricle() {
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneTimeline',
					type: 0,
					href: that.imgUrl,
					title: '邀请好友',
					summary: '快来注册吧。',
					imageUrl:'',
					success: (res)=> {
						console.log('success:' + JSON.stringify(res));
					},
					fail: (err)=> {
						console.log('fail:' + JSON.stringify(err));
					}
				});
			},

			// 点赞 和  取消点赞
			changeDian(){
				console.log('2222')
				if(this.articleInfo.is_like==0){
					// 点赞
					var  data={
						push_id:this.articleInfo.id
					}
					addLike(data).then((res)=>{
						if(res.data.code==1){
							uni.showToast({
								icon:'none',
								title:'成功点赞'
							})
							this.articleInfo.is_like=1
						}
					})
				}else{
					// 取消点赞
					var  data={
						push_id:this.articleInfo.id
					}
					cancelLike(data).then((res)=>{
						if(res.data.code==1){
							uni.showToast({
								icon:'none',
								title:'取消点赞'
							})
							this.articleInfo.is_like=0
						}
					})
				}
			},
			getHomeDetail(id){
				var data={
					id:id
				}
				homeDetail(data).then((res)=>{
					console.log(res,'文章详情')
					if(res.data.code==1){
						this.articleInfo=res.data.data
					}
				})
			},
			goConcern(){
				// 关注与取消关注的操作 is_concern1已关注 0关注
				let data={
					uid:this.articleInfo.user_id
				}
				if(this.articleInfo.is_concern==1){
					// 取消关注
					cancelConcern(data).then((res)=>{
						if(res.data.code==1){
							this.articleInfo.is_concern=0
							uni.showToast({
								icon:"none",
								title:'取消成功'
							})
						}
					})
				}else{
					// 关注成功
					addConcern(data).then((res)=>{
						if(res.data.code==1){
							this.articleInfo.is_concern=1
							uni.showToast({
								icon:"none",
								title:'关注成功'
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.dianzan_fenxiang{
	width: 200rpx;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;
	position: fixed;
	right: 0;
	bottom: 0rpx;
	z-index: 999;
	.dianzan{
		image{
			width: 44rpx;
			height: 44rpx;
		}
	}
	.fenxiang{
		image{
			width: 38rpx;
			height: 38rpx;
		}
	}
}
</style>
